<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>x2102殷樾</title>
    <!--任务2 为了让时钟更美观，给时钟添加漂亮的背景，同时让重点信息突出，使它们更像是一个电子时钟。
     关键CSS样式代码如下：-->
    <style type="text/css">
        #shizhong{
            margin_left:auto;
            margin-right:auto;
            width:226px;
            height:264px;
            overflow:hidden;
            background:url(gif/IMG_3616.GIF);
            margin-top:50px;
            text-align:center;
            border:solid thick;
            border-radius:15px;
        }
        h1{
            color:#FFF;
            text-align:center;
            height:72px;
            line-height:72px;
            font-size:30px;
            background-color:#666;
            margin-top:0px;
        }
        #riqi{
            font-size:120px;
            color:#000;
            height:140px;
            line-height:140px;
            margin-top:-18px;
            text-align:center;
        }
        #shizhong h3{
            line-height:24px;
            font-size:22px;
            color:#666;
            margin-top:-94px;
            text-align:center;
        }
        #yue{
            margin-right:10px;
        }
    </style>
    <script type="text/javascript">
        function init()
        {
            var now=new Date();
            var xqj=now.getDay();
            var y=now.getFullYear();
            var m=now.getMonth()+1;
            var d=now.getDate();
            var h=now.getHours();
            var f=now.getMinutes();
            var s=now.getSeconds();
            var hfs=h+":"+f+":"+s;
            /*switch(xqj)
                {
                    case 0: xqj="天";break;
                    case 1:xqj="一";break;
                    case 2:xqj="二";break;
                    case 3:xqj="三";break;
                    case 4:xqj="四";break;
                    case 5:xqj="五";break;
                    case 6:xqj="六";break;

                }*/
            var xq=new Array('天','一','二','三','四','五','六');

			document.getElementById("xq").innerHTML=xq[xqj];
            document.getElementById("riqi").innerHTML=d;
            document.getElementById("nian").innerHTML=y;
            document.getElementById("yue").innerHTML=m;
            time();
            window.setInterval("time()",1000);
        }
        function time()
        {
            var now=new Date();
            var h=now.getHours();
            var f=now.getMinutes();
            var s=now.getSeconds();
            var hfs=h+":"+f+":"+s;
            document.getElementById("shijian").innerHTML=hfs;
        }
    </script>
</head>

<body onLoad="init()">
<!-- 任务1
  整个时钟结构使用一个<div>标签套起来。内容上，凡是显示时间的标签，包括年、月、日、星期、时、分、秒等，
  均分别使用了不同的id属性。使用id来表示它们，是为了后面的JS代码能方便地改变它们的值。
 -->
<div id="shizhong">
    <h1>星期<span id="xq">一</span></h1>
    <h2 id="riqi">10</h2>
    <h3>
        <span id="nian">2022</span>.<span id="yue">10</span>
        <span id="shijian">16.00</span>
    </h3>
</div>
</body>
</html>
